<template>
    <div class="top">
        <img src="../assets/img/1.png" alt="">
        <div class="top-right">
            <input type="text" placeholder="Search..."/>
            <img src="../assets/img/7.jpg" alt="没有图片资源">
        </div>
    </div>
</template>

<script setup lang="ts">

</script>

<style lang="less" scoped>
.top{
    //弹性盒：默认盒子中的元素排成一行
    display: flex;
    //两端对齐
    justify-content: space-between;
    //垂直居中
    align-items: center;
    .top-right{
        border: 1px solid #ccc;
        background-color: #f5f5f5;
        padding: 5px 5px;
        input{
            border: none;
            background-color: transparent;//透明
        }
        img{
            height: 20px;
            width: 25px;
            margin-bottom: -4px;
        }
    }
}
</style>